<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建流程 - 物料分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- 页面标题和返回按钮 -->
        <div class="flex items-center mb-6">
            <button class="text-gray-600 hover:text-gray-900 mr-4" onclick="history.back()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="text-2xl font-bold text-gray-800">新建流程</h1>
        </div>

        <!-- 基本信息表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
            <form id="basicInfoForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">流程标题</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="title" required>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">业务类型</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" name="businessType" required>
                        <option value="">请选择</option>
                        <option value="底价">底价</option>
                        <option value="单一资源">单一资源</option>
                        <option value="内部供应商议价">内部供应商议价</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目编号</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectCode">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectName">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">预计需求时间</label>
                    <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" name="expectedDemandTime">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1 required">决标方式</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" name="bidType" required>
                        <option value="">请选择</option>
                        <option value="分项决标">分项决标</option>
                        <option value="总价决标">总价决标</option>
                    </select>
                </div>
                <div class="form-group md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">补充说明</label>
                    <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" name="supplement"></textarea>
                </div>
            </form>
        </div>

        <!-- 物料信息表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">物料信息</h3>
            <div class="mb-4">
                <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="addMaterial()">
                    <i class="fas fa-plus mr-2"></i>添加物料
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料编码</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料描述</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料组名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">零部件编号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预估数量</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">供应商编号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">供应商名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否涉及模具费</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否涉及认证费</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否涉及试验费</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否涉及开发费</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单一资源原因</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="materialTableBody">
                        <!-- 物料行将通过JavaScript动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="flex justify-end space-x-4">
            <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="history.back()">取消</button>
            <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="saveProcess()">保存</button>
        </div>
    </div>

    <!-- 添加物料模态框 -->
    <div id="addMaterialModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">添加物料</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeAddMaterialModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="addMaterialForm" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1 required">物料编码</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="materialCode" required>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1 required">物料描述</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="description" required>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">物料组名称</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="groupName">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">零部件编号</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="partNumber">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">单位</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="unit">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">预估数量</label>
                        <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" name="estimatedQuantity">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">供应商编号</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="supplierCode">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">供应商名称</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="supplierName">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">是否涉及模具费</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="hasMoldFee">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">是否涉及认证费</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="hasCertificationFee">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">是否涉及试验费</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="hasTestFee">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">是否涉及开发费</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="hasDevelopmentFee">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">单一资源原因</label>
                        <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" name="singleResourceReason"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeAddMaterialModal()">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 显示添加物料模态框
        function addMaterial() {
            document.getElementById('addMaterialModal').style.display = 'block';
        }

        // 关闭添加物料模态框
        function closeAddMaterialModal() {
            document.getElementById('addMaterialModal').style.display = 'none';
            document.getElementById('addMaterialForm').reset();
        }

        // 添加物料到表格
        function addMaterialToTable(materialData) {
            const tbody = document.getElementById('materialTableBody');
            const tr = document.createElement('tr');
            tr.className = 'hover:bg-gray-50';
            
            tr.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex space-x-2">
                        <button class="text-blue-600 hover:text-blue-800" onclick="editMaterial(this)">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="text-red-600 hover:text-red-800" onclick="deleteMaterial(this)">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.materialCode}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.description}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.groupName}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.partNumber}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.unit}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.estimatedQuantity}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.supplierCode}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.supplierName}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.hasMoldFee === 'true' ? '是' : '否'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.hasCertificationFee === 'true' ? '是' : '否'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.hasTestFee === 'true' ? '是' : '否'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.hasDevelopmentFee === 'true' ? '是' : '否'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${materialData.singleResourceReason}</td>
            `;
            
            tbody.appendChild(tr);
        }

        // 编辑物料
        function editMaterial(button) {
            const row = button.closest('tr');
            const cells = row.cells;
            
            // 获取当前物料数据
            const materialData = {
                materialCode: cells[1].textContent,
                description: cells[2].textContent,
                groupName: cells[3].textContent,
                partNumber: cells[4].textContent,
                unit: cells[5].textContent,
                estimatedQuantity: cells[6].textContent,
                supplierCode: cells[7].textContent,
                supplierName: cells[8].textContent,
                hasMoldFee: cells[9].textContent === '是' ? 'true' : 'false',
                hasCertificationFee: cells[10].textContent === '是' ? 'true' : 'false',
                hasTestFee: cells[11].textContent === '是' ? 'true' : 'false',
                hasDevelopmentFee: cells[12].textContent === '是' ? 'true' : 'false',
                singleResourceReason: cells[13].textContent
            };
            
            // 填充表单
            const form = document.getElementById('addMaterialForm');
            Object.keys(materialData).forEach(key => {
                const input = form.querySelector(`[name="${key}"]`);
                if (input) {
                    input.value = materialData[key];
                }
            });
            
            // 显示模态框
            document.getElementById('addMaterialModal').style.display = 'block';
            
            // 标记为编辑模式
            form.dataset.editMode = 'true';
            form.dataset.editRow = row.rowIndex;
        }

        // 删除物料
        function deleteMaterial(button) {
            if (confirm('确定要删除这条物料记录吗？')) {
                const row = button.closest('tr');
                row.remove();
            }
        }

        // 保存流程
        function saveProcess() {
            const basicInfoForm = document.getElementById('basicInfoForm');
            const materialRows = document.querySelectorAll('#materialTableBody tr');
            
            if (materialRows.length === 0) {
                alert('请至少添加一条物料记录');
                return;
            }

            // 收集基本信息
            const basicInfo = {};
            new FormData(basicInfoForm).forEach((value, key) => {
                basicInfo[key] = value;
            });

            // 收集物料信息
            const materials = [];
            materialRows.forEach(row => {
                const cells = row.cells;
                materials.push({
                    materialCode: cells[1].textContent,
                    description: cells[2].textContent,
                    groupName: cells[3].textContent,
                    partNumber: cells[4].textContent,
                    unit: cells[5].textContent,
                    estimatedQuantity: cells[6].textContent,
                    supplierCode: cells[7].textContent,
                    supplierName: cells[8].textContent,
                    hasMoldFee: cells[9].textContent === '是',
                    hasCertificationFee: cells[10].textContent === '是',
                    hasTestFee: cells[11].textContent === '是',
                    hasDevelopmentFee: cells[12].textContent === '是',
                    singleResourceReason: cells[13].textContent
                });
            });

            // 这里应该调用后端API保存流程
            // 模拟保存成功
            alert('流程创建成功');
            window.location.href = 'process-list.html';
        }

        // 处理添加物料表单提交
        document.getElementById('addMaterialForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const materialData = {};
            formData.forEach((value, key) => {
                materialData[key] = value;
            });

            if (this.dataset.editMode === 'true') {
                // 更新现有行
                const rowIndex = parseInt(this.dataset.editRow);
                const row = document.querySelector(`#materialTableBody tr:nth-child(${rowIndex})`);
                if (row) {
                    const cells = row.cells;
                    cells[1].textContent = materialData.materialCode;
                    cells[2].textContent = materialData.description;
                    cells[3].textContent = materialData.groupName;
                    cells[4].textContent = materialData.partNumber;
                    cells[5].textContent = materialData.unit;
                    cells[6].textContent = materialData.estimatedQuantity;
                    cells[7].textContent = materialData.supplierCode;
                    cells[8].textContent = materialData.supplierName;
                    cells[9].textContent = materialData.hasMoldFee === 'true' ? '是' : '否';
                    cells[10].textContent = materialData.hasCertificationFee === 'true' ? '是' : '否';
                    cells[11].textContent = materialData.hasTestFee === 'true' ? '是' : '否';
                    cells[12].textContent = materialData.hasDevelopmentFee === 'true' ? '是' : '否';
                    cells[13].textContent = materialData.singleResourceReason;
                }
            } else {
                // 添加新行
                addMaterialToTable(materialData);
            }
            
            // 关闭模态框并重置表单
            closeAddMaterialModal();
            this.reset();
            delete this.dataset.editMode;
            delete this.dataset.editRow;
        });
    </script>
</body>
</html> 